<template>
	<view class="container" :class="skinStyle">
		<view class="tui-order-info">
			<view class="tui-order-content">
				<view class="tui-skeleton-fillet">
					<view class="tui-order-flex">
						<view class="returnTitle">{{ status }}</view>
					</view>
					<view class="tui-order-flex">
						<view class="returnContent">{{ content }}</view>
					</view>
				</view>
			</view>

			<view class="tui-order-content" style="margin-top: 30rpx;">
				<view class="tui-skeleton-fillet">
					<view class="tui-order-flex b-bottom">
						<view class="returnContent">退款类型: {{ type }}</view>
					</view>
					<view class="tui-order-flex b-bottom">
						<view class="returnContent">退款金额: {{ money }}</view>
					</view>
					<view class="tui-order-flex b-bottom">
						<view class="returnContent">退款原因: {{ reason }}</view>
					</view>
					<view class="tui-order-flex b-bottom">
						<view class="returnContent">商品名称: {{ name }}</view>
					</view>
					<view class="tui-order-flex b-bottom">
						<view class="returnContent">订单编号: {{ orderId }}</view>
					</view>
					<view class="tui-order-flex b-bottom">
						<view class="returnContent">申请时间: {{ time }}</view>
					</view>
				</view>
			</view>
			<view class="tui-order-content" style="margin-top: 30rpx;">
				<view class="tui-skeleton-fillet">
					<view class="tui-order-flex"><view class="returnContent" style="font-size: 26rpx;">退款说明:</view></view>
					<view class="tui-order-flex">
						<view class="returnContent" style="color: #fc5a58;">1、退款后订单金额小于{{ carriageLimit }}元，退款时会扣除{{ carriagePrice }}元运费，敬请谅解。</view>
						<view class="returnContent" style="color: #fc5a58;" v-if="item.rejectType!=2">2、请按照退货地址准确填写退货单。</view>
						<view class="returnContent" style="color: #fc5a58;" v-if="item.rejectType!=2&&(reason == '商品有质量问题' || reason == '商品有质量问题')">
							3、售后申请提交之前，请务必联系客服。
						</view>
						<view class="returnContent" style="color: #fc5a58;" v-else-if="item.rejectType!=2">3、退货邮费到付拒不签收。</view>
					</view>
				</view>
			</view>
			<view class="tui-order-content" style="margin-top: 30rpx;">
				<view class="tui-skeleton-fillet">
					<view class="tui-tabbar tui-order-btn tui-skeleton-fillet" style="position: relative;height: auto;">
						<view class="tui-btn-mr">
							<tui-button type="black" :plain="true" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="goReturnDetail">修改申请</tui-button>
						</view>
						<view class="tui-btn-mr" v-if="flag">
							<tui-button type="primary" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="show()">撤销申请</tui-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-modal :show="modalShow" @click="handleClick" @cancel="hide" title="提示" :content="modalContent"></tui-modal>
		<loading v-if="isLoading"></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
import tuiButton from '@/components/button/button';
import tuiCountdown from '@/packageA/components/countdown/countdown';
import tuiListCell from '@/components/list-cell/list-cell';
import mixin from '@/utils/mixin.js';
import tuiSkeleton from '@/packageA/components/tui-skeleton/tui-skeleton';
export default {
	mixins: [mixin],
	components: {
		tuiButton,
		tuiCountdown,
		tuiListCell,
		tuiSkeleton
	},
	data() {
		return {
			item: '',
			status: '申请已提交，待商家处理中',
			content: '若商家同意：申请将达成并退款至您支付账号',
			type: '',
			money: '',
			reason: '商品质量有问题',
			name: '测试用2',
			orderId: 'ORD210302000045202',
			time: '2021-03-03 09:52:51',
			typeArray: ['', '退货退款', '退款(无需退货)', '换货'],
			modalShow: false,
			isLoading: false,
			itemStr: '',
			modalContent: '',
			cancelRow: '',
			carriagePrice: 0,
			carriageLimit: 0,
			rejectNo: '',
			rejectEditInfo: '',
			flag: false
		};
	},
	onLoad(options) {
		// #ifdef H5
		   this.$wechat.noShare();
		// #endif
		this.carriageSettingFun();
		console.log(options);
		if (options) {
			this.item = JSON.parse(options.item2);
			this.type = this.typeArray[this.item.rejectType];
			this.money = '￥' + this.item.rejectAmount;
			this.reason = this.item.refundReason;
			this.name = this.item.productName;
			this.orderId = this.item.orderId;
			this.rejectNo = this.item.rejectNo;
			this.time = this.item.createTime;
			this.itemStr = options.item;
			this.rejectEditInfo = JSON.parse(options.rejectEditInfo);
			this.flag = this.item.flag;
		}
	},
	methods: {
		carriageSettingFun() {
			this.$http.carriageSetting().then(res => {
				if (res.status === 0) {
					this.carriagePrice = res.data.carriagePrice;
					this.carriageLimit = res.data.carriageLimit;
				}
			});
		},
		show(item) {
			this.cancelRow = item;
			this.modalShow = true;
			this.modalContent = '您确定要撤销申请吗？';
		},
		hide() {
			this.modalShow = false;
		},
		handleClick(e) {
			let index = e.index;

			//撤销申请，放弃申请
			if (index == 1) {
				let params = {
					orderId:this.rejectEditInfo.orderId,
					rejectNo:this.rejectEditInfo.rejectNo,
					rejectType:this.rejectEditInfo.rejectType,
				};

				this.isLoading = true;
				var that = this
				this.$http.cancelReject(params).then(res => {
					if (res.status == 0) {
						uni.showToast({
							icon: 'loading',
							duration: 500
						});
						setTimeout(function() {
							uni.showToast({
								title: '撤销成功!',
								icon: 'none',
								duration: 500
							});
						}, 500);
						that.$eventHub.$emit('refundRefresh');
						uni.navigateBack({})
					}
					this.isLoading = false;
				});
			}
			this.hide();
		},
		goReturnDetail() {
			uni.redirectTo({
				url: '../orderReturn/returnDetail?orderId=' + this.orderId + '&rejectNo=' + this.rejectNo + '&type=' + this.item.rejectType + '&listFlag=1'
			});
		}
	}
};
</script>

<style lang="scss">
.b-bottom {
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 2px;
}
.tui-tabbar::before {
	border-top: none;
}
.returnTitle {
	color: #666666;
	font-size: 32rpx;
	font-weight: bolder;
}
.returnContent {
	color: #666666;
	font-size: 30rpx;
}
.container {
	padding-bottom: 20rpx;
}

.tui-order-header {
	width: 100%;
	height: 160rpx;
	position: relative;
}

.tui-img-bg {
	width: 100%;
	height: 160rpx;
}

.tui-header-content {
	width: 100%;
	height: 160rpx;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 70rpx;
	box-sizing: border-box;
}

.tui-status-text {
	font-size: 36rpx;
	line-height: 36rpx;
	color: #fefefe;
}

.tui-reason {
	font-size: 24rpx;
	line-height: 24rpx;
	color: rgba(254, 254, 254, 0.75);
	padding-top: 15rpx;
	display: flex;
	align-items: center;
}

.tui-reason-text {
	padding-right: 12rpx;
}

.tui-status-img {
	width: 80rpx;
	height: 80rpx;
	display: block;
	color: #fff;
	font-size: 70rpx;
	text-align: center;
	line-height: 80rpx;
}

.tui-flex-box {
	width: 100%;
	display: flex;
	align-items: center;
}

.tui-icon-img {
	width: 44rpx;
	height: 44rpx;
	flex-shrink: 0;
}

.tui-logistics {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 24rpx 0 20rpx;
	box-sizing: border-box;
}

.tui-logistics-text {
	font-size: 28rpx;
	line-height: 32rpx;
}

.tui-logistics-time {
	font-size: 24rpx;
	line-height: 24rpx;
	padding-top: 16rpx;
	color: #666;
}

.tui-addr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 20rpx;
	box-sizing: border-box;
}

.tui-addr-userinfo {
	font-size: 30rpx;
	line-height: 30rpx;
	font-weight: bold;
}

.tui-addr-text {
	font-size: 24rpx;
	line-height: 30rpx;
	padding-top: 16rpx;
}

.tui-addr-tel {
	padding-left: 40rpx;
}

.tui-order-item {
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.tui-goods-title {
	width: 100%;
	font-size: 28rpx;
	line-height: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-goods-item {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.goods-item-btn {
	position: absolute;
	right: 30rpx;
	bottom: 20rpx;
}

.tui-goods-img {
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	line-height: 32rpx;
	padding-top: 20rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: right;
	font-size: 24rpx;
	color: #888888;
	line-height: 30rpx;
	padding-top: 20rpx;
}

.yxf-color-red {
	color: $red;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
}

.tui-goods-info {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
}

.tui-price-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-size24 {
	padding-bottom: 20rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #888;
}

.tui-size32 {
	font-size: 32rpx;
	line-height: 32rpx;
	font-weight: 500;
}

.tui-pbtm20 {
	padding-bottom: 20rpx;
}

.tui-flex-shrink {
	flex-shrink: 0;
}

.tui-primary-color {
	//color: $themeColor;
}

.tui-order-title {
	width: 100%;
	position: relative;
	font-size: 28rpx;
	line-height: 28rpx;
	padding-left: 12rpx;
	box-sizing: border-box;
}

.tui-order-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	//border-left: 4rpx solid $themeColor;
	height: 100%;
}

.tui-order-content {
	width: 100%;
	padding: 24rpx 30rpx;
	box-sizing: border-box;
	background: #fff;
	font-size: 24rpx;
	line-height: 30rpx;
}

.tui-order-flex {
	display: block;
	padding-top: 18rpx;
	width: 100%;
	line-height: 38rpx;
	// height: 30rpx;

	.yxf-item-reason {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 20rpx;
		border: 2rpx solid $borderColor;

		.reason-text {
			margin: 20rpx 1%;
			color: #aaa;
		}

		.reason-img {
			width: 31.3%;
			float: left;
			margin: 10rpx 1%;

			image {
				width: 100%;
				height: 200rpx;
			}
		}
	}
}

.tui-order-flex:first-child {
	padding-top: 0;
}

.tui-item-title {
	width: 132rpx;
	height: 28rpx;
	flex-shrink: 0;
}

.tui-item-content {
	color: #666;
}

.tui-safe-area {
	height: 100rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
// .tui-safe {
// 	height: 100rpx;
// }

.tui-order-btn {
	justify-content: flex-end;
}

.tui-btn-mr {
	margin-right: 30rpx;
}

.take-goods-wrap {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;

	view {
		width: 100%;
		display: block;
	}

	.title {
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.qr-code {
		.tui-goods-img {
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto;
		}
	}

	.qr-number {
		//color:$themeColor;
		margin-top: 20rpx;
		font-size: 28rpx;
	}
}

.yxf-service-content {
	.tui-item-title {
		width: 164rpx;
	}
}
</style>
